<template>
        <mian-layout style="background:#fff">
            <el-form :model="ruleForm" size="small" :rules="rules" ref="ruleForm" label-width="130px" class="demo-ruleForm">
                <el-form-item label="卡片名称" prop="cardName">
                  <el-input v-model="ruleForm.cardName" placeholder="请输入卡片名称" style="width: 600px;" :disabled="onlyLook==1"/>
                </el-form-item>
                <el-form-item label="卡片描述" prop="cardDesc">
                  <el-input v-model="ruleForm.cardDesc" type="textarea" placeholder="请输入卡片描述" show-word-limit maxlength="128" :autosize="{ minRows: 6, maxRows: 10}" style="width: 600px;" :disabled="onlyLook==1"/>
                </el-form-item>
                <el-form-item label="创作者名称" prop="authorName">
                  <el-input v-model="ruleForm.authorName" placeholder="请输入创作者名称" style="width: 600px;" :disabled="onlyLook==1"/>
                </el-form-item>
                <el-form-item label="创作者个人简介" prop="authorProfile">
                  <el-input v-model="ruleForm.authorProfile" type="textarea" placeholder="请输入创作者个人简介" :autosize="{ minRows: 6, maxRows: 10}" style="width: 600px;" :disabled="onlyLook==1"/>
                </el-form-item>
                <el-form-item label="作品价值分析" prop="valueAnalysis">
                  <el-input v-model="ruleForm.valueAnalysis" type="textarea" placeholder="请输入作品价值分析" :autosize="{ minRows: 6, maxRows: 10}" style="width: 600px;" :disabled="onlyLook==1"/>
                </el-form-item>

                <el-form-item label="创作者头像" prop="authorHeadImg">
                  <div class="upfileTips" style="display:flex">
                    <upload-file v-if="!id || details" :limit="1" v-model="ruleForm.authorHeadImg" type="img"/>
                    <p>支持JPG、JFPG、PNG等图片格式，文件大小控制在2M以内</p>
                  </div>
                </el-form-item>

                <el-form-item label="卡片头图" prop="cardImg">
                  <div class="upfileTips" style="display:flex">
                    <upload-file v-if="!id || details" :limit="1" v-model="ruleForm.cardImg" type="img"/>
                    <p>支持JPG、JFPG、PNG等图片格式，文件大小控制在2M以内</p>
                  </div>
                </el-form-item>
                
                <el-form-item>
                    <template>
                        <template v-if="onlyLook==1">
                            <el-button icon="el-icon-back" @click="$router.back()" type="info">返回</el-button>
                            <el-button type="success" icon="el-icon-edit" @click="onlyLook=2">修改</el-button>
                        </template>
                        <template v-else>
                            <el-button type="primary" icon="el-icon-check" :loading="btnLoading" @click="save('ruleForm')">保存</el-button>
                            <my-back icon="el-icon-close">取消</my-back>
                        </template>
                    </template>
                </el-form-item>

            </el-form>
        </mian-layout>
        
</template>

<script>
import {mapGetters} from 'vuex'
import {
  add_card,
  get_card_detail,
 edit_card
} from '@/api/collext'
import uploadFile from '@/components/public/uploadFile.vue'
import {mergeObject,filterStr} from '@/utils/index'
import myBack from '@/components/public/myBack.vue'
export default {
  name: '',
  components:{
    uploadFile,
    myBack,
    //landmarkSelect
  },
  data() {
    return {
      ruleForm: {
        cardName:'',
        cardDesc:'',
        authorName:'',
        authorProfile:'',
        valueAnalysis:'',
        authorHeadImg:'',
        cardImg:''
      },
      rules: {},
      details:'',
      id:'',
      onlyLook:'',
      btnLoading:false
    }
  },
  async created() {
    this.id = this.$route.query.id
    this.onlyLook = this.$route.query.onlyLook
    if(this.id){  // 编辑、查看
      const res = await get_card_detail(this.id)
      if(res.success){
        this.details = res.data
        this.ruleForm = mergeObject(this.ruleForm,res.data)
      }
    }
  },
  methods: {
    // 确定
    save(formName) {
      if(!this.ruleForm.cardName){
        return this.$message.warning('请输入卡片名称')
      }else if(!this.ruleForm.cardDesc){
        return this.$message.warning('请输入卡片描述')
      }else if(!this.ruleForm.authorName){
        return this.$message.warning('请输入创作者名称')
      }else if(!this.ruleForm.authorProfile){
        return this.$message.warning('请输入创作者个人简介')
      }else if(!this.ruleForm.valueAnalysis){
        return this.$message.warning('请输入作品价值分析')
      }else if(!this.ruleForm.authorHeadImg){
        return this.$message.warning('请输入上传创作者头像')
      }else if(!this.ruleForm.cardImg){
        return this.$message.warning('请输入上传卡片头图')
      }
      
      //this.btnLoading = true
      if(this.id){  // 编
          edit_card({cardId:this.id,...this.ruleForm}).then(res=>{
            if(res.success){
              this.$message.success('修改成功！')
              //this.$router.back()
              this.$store.dispatch('tagsView/myClosePageTab',this.$route)
            }else{
              //this.$message.error("修改失败")
            }
            this.btnLoading = false
          })
      }else{  //新增
          // 获取u3d地图id
         // this.ruleForm.relationU3dMapId = this.$refs.u3dEle.getKeyValue('u3dMapId')

          add_card(this.ruleForm).then(res=>{
            if(res.success){
              this.$message.success('新增成功！')
              //this.$router.back()
              this.$store.dispatch('tagsView/myClosePageTab',this.$route)
            }else{
              //this.$message.error("新增失败")
            }
            this.btnLoading = false
          })
      }
      
    },
  }
}
</script>

<style lang="scss" scoped>
  .colFlex{
  display: flex;
  .cfItem{
    flex: 1;
    padding: 0 0 0 10px;
  }
  &+.colFlex{
    margin: 10px 0 0 0;
  }
}
.addBtnBox{
  padding: 10px 0 0 0;
}
.upfileTips{
  display: flex;
  p{
    flex: 1;
    display: flex;
    font-size: 12px;
    color: #999;
    align-items: center; 
    line-height: 24px;
  }
}
</style>

<style lang="scss">
  .colFlex textarea{
    height: 148px !important;
  }
</style>


